//创建“外壳”组件App
import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'
//创建并暴露App组件
export default class App extends Component {
	state = {
		todos: [
			{ id: '001', name: '吃饭', done: true },
			{ id: '002', name: '睡觉', done: true },
			{ id: '003', name: '打代码', done: false },
			{ id: '004', name: '逛街', done: false },
		]
	}
	addTodo = (todo) => {
		const { todos } = this.state;
		const newTodos = [...todos, todo]
		this.setState({ todos: newTodos })
	}
	deleteTodo = (id) => {
		const { todos } = this.state;
		const newTodos = todos.filter(todo => {
			return todo.id !== id;
		})
		this.setState({ todos: newTodos })
	}
	updateTodo = (id, done) => {
		const { todos } = this.state;
		const newTodos = todos.map(todo => {
			return todo.id !== id ? { ...todo } : { ...todo, done }
		})
		this.setState({ todos: newTodos })
	}
	checkAllTodo = (done) => {
		const { todos } = this.state;
		const newTodos = todos.map(todo => {
			return { ...todo, done }
		})
		this.setState({ todos: newTodos })
	}
	clearAllDone = () => {
		const { todos } = this.state;
		const newTodos = todos.filter(todo => {
			return !todo.done
		})
		this.setState({ todos: newTodos })
	}

	render() {
		let { todos } = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo} />
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
					<Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone} />
				</div>
			</div>
		)
	}
}
